<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :inline="true" :model="search" size="mini" label-width="100px">
          <el-form-item prop="companyCode" label="公司代码">
            <el-input v-model="search.companyCode" placeholder="公司代码" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealerName" label="公司名称">
            <el-input v-model="search.dealerName" placeholder="公司名称" class="search-input" clearable />
          </el-form-item>
          <br>
          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="reset">重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 用户列表 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">公司信息</div>
          <div class="btnGroup">
            <el-button-group>
              <el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>
            </el-button-group>
          </div>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column label="序号" type="index" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="30">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="edit(scope.row)"/>
              </el-tooltip>
              <el-tooltip class="item" content="明细" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detailOem(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="COMPANY_CODE" label="公司代码" min-width="100"/>
          <el-table-column prop="DEALER_NAME" label="公司名称" min-width="100"/>
          <el-table-column prop="DEALER_SHORTNAME" label="公司简称" min-width="100"/>
          <el-table-column :formatter="filterCode" prop="DEALER_STATUS" label="状态" min-width="100" type="1001"/>
        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <div v-show="active === 2">
      <div class="elform">
        <el-form ref="addSearchForm" :inline="true" :model="addSearch" :rules="rules" size="mini" label-width="100PX">
          <el-form-item prop="companyCode" label="公司代码">
            <el-input v-model="addSearch.companyCode" placeholder="公司代码" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealerName" label="公司名称">
            <el-input v-model="addSearch.dealerName" placeholder="公司名称" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealerShortName" label="公司简称">
            <el-input v-model="addSearch.dealerShortName" placeholder="公司简称" class="search-input" clearable />
          </el-form-item>
          <el-form-item label="省份" prop="province">
            <el-select v-model="form.province" placeholder="请选择" class="search-input" @change="changeProvince">
              <el-option v-for="item in provinceOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <!-- <label>城市</label> -->
          <el-form-item label="城市" prop="city">
            <el-select v-model="form.city" placeholder="请选择" class="search-input">
              <el-option v-for="item in cityOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="hotLine" label="联系电话">
            <el-input v-model="addSearch.hotLine" placeholder="联系电话" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="zipCode" label="邮编">
            <el-input v-model="addSearch.zipCode" placeholder="邮编" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="fax" label="传真">
            <el-input v-model="addSearch.fax" placeholder="传真" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="address" label="详细地址">
            <el-input v-model="addSearch.address" placeholder="详细地址" style="width:415px;" clearable />
          </el-form-item>
          <el-form-item prop="dealerStatus" label="状态">
            <r-select v-model="addSearch.dealerStatus" :formatter="filterCode" class="search-input" placeholder="请选择" type="1001"/>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align:center">
        <el-button type="primary" @click="addSave">保存</el-button>
        <el-button @click="clear">返回</el-button>
      </div>

    </div>
    <!-- 编辑div -->
    <div v-show="active === 3">
      <div class="elform">
        <el-form ref="editSearchForm" :inline="true" :model="editSearch" :rules="ruless" size="mini" label-width="100PX">
          <el-form-item prop="companyCode" label="公司代码" disabled>
            <el-input v-model="editSearch.companyCode" disabled class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealerName" label="公司名称">
            <el-input v-model="editSearch.dealerName" :disabled="type === 'detail'" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealerShortName" label="公司简称">
            <el-input v-model="editSearch.dealerShortName" :disabled="type === 'detail'" class="search-input" clearable />
          </el-form-item>
          <el-form-item label="省份" prop="province">
            <el-select v-model="form.province" :disabled="type === 'detail'" placeholder="请选择" class="search-input" @change="changeProvince">
              <el-option v-for="item in provinceOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id" />
            </el-select>
          </el-form-item>
          <!-- <label>城市</label> -->
          <el-form-item label="城市" prop="city">
            <el-select v-model="form.city" :disabled="type === 'detail'" placeholder="请选择" class="search-input">
              <el-option v-for="item in cityOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="hotLine" label="联系电话">
            <el-input v-model="editSearch.hotLine" :disabled="type === 'detail'" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="zipCode" label="邮编">
            <el-input v-model="editSearch.zipCode" :disabled="type === 'detail'" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="fax" label="传真">
            <el-input v-model="editSearch.fax" :disabled="type === 'detail'" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="address" label="详细地址">
            <el-input v-model="editSearch.address" :disabled="type === 'detail'" style="width:415px;" clearable />
          </el-form-item>
          <el-form-item prop="dealerStatus" label="状态">
            <r-select
              v-model="editSearch.dealerStatus"
              :formatter="filterCode"
              :disabled="type === 'detail'"
              class="search-input"
              placeholder="请选择"
              type="1001"/>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align:center">
        <el-button v-if="type != 'detail'" type="primary" @click="editSave">保存</el-button>
        <el-button @click="clear">返回</el-button>
      </div>

    </div>

  </div>
</template>

<script>
import {
  getOemComList,
  saveOemComList,
  editSaveOemComList
} from '@/api/admin/org/gms/oemCompany'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import filtercode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import {
  getDealer
  // updateDealer
} from '@/api/admin/org/dealerInfo'
import _ from 'lodash'
import {
  mapGetters
} from 'vuex'
import { mobilePhone, systemCode, zipCode, fax } from '@/utils/validator'
export default {
  name: 'OemCompany',
  components: {
    BaseTable,
    filtercode,
    rSelect
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      form: {
        province: '',
        city: ''
      },
      type: '',
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      returnList: [],
      search: {
        limit: 10,
        pageNum: 1,
        companyCode: '',
        dealerName: ''
      },
      addSearch: {
        companyCode: '',
        dealerName: '',
        dealerShortName: '',
        hotLine: '',
        zipCode: '',
        fax: '',
        address: '',
        dealerStatus: ''
      },
      editSearch: {
        dealerId: '',
        companyCode: '',
        dealerName: '',
        dealerShortName: '',
        hotLine: '',
        zipCode: '',
        fax: '',
        address: '',
        dealerStatus: ''
      },
      rules: {
        companyCode: [{
          required: true,
          message: '请输入公司代码',
          trigger: 'blur'
        },
        {
          trigger: 'blur', validator: systemCode
        }
        ],
        dealerName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        dealerShortName: [{
          required: true,
          message: '请输入公司简称',
          trigger: 'blur'
        }],
        hotLine: [{
          trigger: 'blur', validator: mobilePhone
        }],
        zipCode: [{
          trigger: 'blur', validator: zipCode
        }],
        fax: [{
          trigger: 'blur', validator: fax
        }],
        dealerStatus: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }]
      },
      ruless: {
        dealerName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        dealerShortName: [{
          required: true,
          message: '请输入公司简称',
          trigger: 'blur'
        }],
        hotLine: [{
          trigger: 'blur', validator: mobilePhone
        }],
        zipCode: [{
          trigger: 'blur', validator: zipCode
        }],
        fax: [{
          trigger: 'blur', validator: fax
        }],
        dealerStatus: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }]
      },
      provinceOptions: [],
      cityOptions: []

    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },
  watch: {
    province(val) { // 实时监听数据变化
      // log('省11111:', val)
      this.changeProvince()
    }
  },
  created() {
    this.loadData()
  },
  mounted() {
    this.searchHandle()
    this.loadData()
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
  },
  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      getOemComList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    loadData() {
      this.loading = true
      getDealer().then(res => {
        this.loading = false
        res.province = res.province
        res.city = res.city
        this.form = _.cloneDeep(res)
        this.setOptions()
      })
        .catch(err => {
          this.loading = false
        })
    },
    changeProvince() {
      const p = this.form.province
      debugger
      console.log(this.regionMap[p])
      this.cityOptions = this.regionMap[p].children
      // log(this.cityOptions)
      this.form.city = ''
    },
    // 新增
    add() {
      this.active = 2
      this.type = 'add'
      this.$nextTick(() => {
        this.$refs.addSearchForm.clearValidate()
        this.addSearchForm = {}
      })
      this.form.province = 3515
      this.changeProvince()
    },
    // 编辑
    edit(data) {
      this.active = 3
      this.type = 'edit'
      this.$nextTick(() => {
        this.$refs.editSearchForm.clearValidate()
        this.editSearchForm = {}
      })
      this.editSearch.dealerId = data.DEALER_ID
      this.editSearch.companyCode = data.COMPANY_CODE
      this.editSearch.dealerName = data.DEALER_NAME
      this.editSearch.dealerShortName = data.DEALER_SHORTNAME
      this.form.province = Number(data.PROVINCE)
      this.changeProvince()
      this.form.city = Number(data.CITY)
      this.editSearch.hotLine = data.HOT_LINE
      this.editSearch.zipCode = data.ZIP_CODE
      this.editSearch.fax = data.FAX
      this.editSearch.address = data.ADDRESS
      this.editSearch.dealerStatus = data.DEALER_STATUS
    },
    detailOem(data) {
      this.active = 3
      this.type = 'detail'
      this.$nextTick(() => {
        this.$refs.editSearchForm.clearValidate()
        this.editSearchForm = {}
      })
      this.editSearch.dealerId = data.DEALER_ID
      this.editSearch.companyCode = data.COMPANY_CODE
      this.editSearch.dealerName = data.DEALER_NAME
      this.editSearch.dealerShortName = data.DEALER_SHORTNAME
      this.form.province = Number(data.PROVINCE)
      this.changeProvince()
      this.form.city = Number(data.CITY)
      this.editSearch.hotLine = data.HOT_LINE
      this.editSearch.zipCode = data.ZIP_CODE
      this.editSearch.fax = data.FAX
      this.editSearch.address = data.ADDRESS
      this.editSearch.dealerStatus = data.DEALER_STATUS
    },
    reset() {
      this.search.companyCode = ''
      this.search.dealerName = ''
      this.searchHandle()
    },
    // 保存
    addSave() {
      this.$refs['addSearchForm'].validate((valid) => {
        if (valid) {
          const dto = {
            companyCode: this.addSearch.companyCode,
            dealerName: this.addSearch.dealerName,
            dealerShortName: this.addSearch.dealerShortName,
            province: this.form.province,
            city: this.form.city,
            hotLine: this.addSearch.hotLine,
            zipCode: this.addSearch.zipCode,
            fax: this.addSearch.fax,
            address: this.addSearch.address,
            dealerStatus: this.addSearch.dealerStatus
          }
          saveOemComList(dto).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.clear()
            this.searchHandle()
          }).catch(err => {
          })
        }
      })
    },
    // 编辑保存
    editSave() {
      this.$refs['editSearchForm'].validate((valid) => {
        if (valid) {
          const dealerId = this.editSearch.dealerId
          const dto = {
            companyCode: this.editSearch.companyCode,
            dealerName: this.editSearch.dealerName,
            dealerShortName: this.editSearch.dealerShortName,
            province: this.form.province,
            city: this.form.city,
            hotLine: this.editSearch.hotLine,
            zipCode: this.editSearch.zipCode,
            fax: this.editSearch.fax,
            address: this.editSearch.address,
            dealerStatus: this.editSearch.dealerStatus
          }
          editSaveOemComList(dealerId, dto).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.clear()
            this.searchHandle()
          }).catch(err => {
          })
        }
      })
    },
    // 返回清空列表
    clear() {
      debugger
      this.addSearch.companyCode = ''
      this.addSearch.dealerName = ''
      this.addSearch.dealerShortName = ''
      this.form.city = ''
      this.form.province = 3515
      this.addSearch.hotLine = ''
      this.addSearch.zipCode = ''
      this.addSearch.fax = ''
      this.addSearch.address = ''
      this.addSearch.dealerStatus = ''
      this.editSearch.dealerId = ''
      this.editSearch.companyCode = ''
      this.editSearch.dealerName = ''
      this.editSearch.dealerShortName = ''
      this.editSearch.hotLine = ''
      this.editSearch.zipCode = ''
      this.editSearch.fax = ''
      this.editSearch.address = ''
      this.editSearch.dealerStatus = ''
      this.active = 1
    }
  }
}

</script>

<style scoped>

</style>
